<template>
  <div
    class="drawMain"
    ref="draw"
    @mousedown="draw"
    style="border: 1px solid blue;"
    :style="{
      height: `${value.height + 2}px`,
      width: `${value.width + 2}px`,
      top: `${value.top - 1}px`,
      left: `${value.left - 2}px`,
    }"
  >
    <div style="width: 100%; height: 100%;  position: relative; z-index: 999;">
      <!-- 上左 -->
      <div
        @mousedown.stop="leftTopDraw"
        class="leftTop"
        style="position: absolute; color: blue; left: -6px; top: -6px; width: 10px; height: 10px; background-color: blue;"
      ></div>
      <!-- 上中 -->
      <div
        @mousedown.stop="centerTopDraw"
        class="centerTop"
        style="position: absolute; color: blue; left: calc(50% - 6px); top: -6px; width: 10px; height: 10px; background-color: blue;"
      ></div>
      <!-- 上右 -->
      <div
        @mousedown.stop="rightTopDraw"
        class="rightTop"
        style="position: absolute; color: blue; left: calc(100% - 6px); top: -6px; width: 10px; height: 10px; background-color: blue;"
      ></div>
      <!-- 下左 -->
      <div
        @mousedown.stop="leftBottomDraw"
        class="leftBottom"
        style="position: absolute; color: blue; left: -6px; bottom: -6px; width: 10px; height: 10px; background-color: blue;"
      ></div>
      <!-- 下中 -->
      <div
        @mousedown.stop="bottomCenterDraw"
        class="bottomCenter"
        style="position: absolute; color: blue; left: calc(50% - 6px); bottom: -6px; width: 10px; height: 10px; background-color: blue;"
      ></div>
      <!-- 中右 -->
      <div
        @mousedown.stop="rightCenterDraw"
        class="rightCenter"
        style="position: absolute; color: blue; right: -5px; bottom: calc(50% - 5px); width: 10px; height: 10px;
                                          background-color: blue;
                                          "
      ></div>
      <!-- 左中 -->
      <div
        @mousedown.stop="leftCenterDraw"
        class="leftCenter"
        style="position: absolute; color: blue; left: -6px; bottom: calc(50% - 6px); width: 10px; height: 10px; background-color: blue;"
      ></div>
      <!-- 下右 -->
      <div
        @mousedown.stop="buttonRightDraw"
        class="buttonRight"
        style="position: absolute; color: blue; left: calc(100% - 6px); bottom: -6px; width: 10px; height: 10px; background-color: blue;"
      ></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    value: {},
  },

  data() {
    return {};
  },

  mounted() {},
  methods: {
    //右边中间按钮
    rightCenterDraw(e) {
      var that = this;
      //记录原来的宽
      var domW = this.value.width;
      var domMousedown = (eve) => {
        document.documentElement.style.cursor = "e-resize";
        //计算鼠标往右边移动多少
        this.value.width = eve.clientX - e.clientX + domW;
        that.$emit(
          "xwChange",
          this.value.id,
          eve.clientX - e.clientX + domW,
          this.value.height
        );
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    //中上按钮拖拽
    centerTopDraw(e) {
      var that = this;
      //记录原来的宽
      var domL = this.value.left;
      var domT = this.value.top;
      var domH = this.value.height;
      document.documentElement.style.cursor = "n-resize";
      var windowRem = (document.documentElement.clientWidth / 1920) * 16;
      var domMousedown = (eve) => {
        //计算鼠标往右边移动多少
        // var left = eve.clientX - e.clientX + domL;
        // this.value.left = left - (windowRem * 1 * 0.5);
        var top = eve.clientY - e.clientY + domT;
        this.value.top = top;
        var clientH = domH + e.clientY - eve.clientY;
        this.value.height = clientH;
        this.$emit(
          "drawChange",
          this.value.id,
          this.value.left + windowRem * 1 * 0.5,
          top,
          this.value.width,
          clientH
        );
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    //右上按钮拖拽
    rightTopDraw(e) {
      var that = this;
      //记录原来的宽
      var domW = this.value.width;
      var domL = this.value.left;
      var domT = this.value.top;
      var domH = this.value.height;
      document.documentElement.style.cursor = "ne-resize";
      var windowRem = (document.documentElement.clientWidth / 1920) * 16;
      var domMousedown = (eve) => {
        //计算鼠标往右边移动多少
        var clientW = domW + e.clientX - eve.clientX;
        if (clientW < 1) return;
        // var left = eve.clientX - e.clientX + domL;
        // this.value.left = left;
        var width = eve.clientX - e.clientX + domW;
        this.value.width = width;
        var top = eve.clientY - e.clientY + domT;
        this.value.top = top;
        var clientH = domH + e.clientY - eve.clientY;
        this.value.height = clientH;
        this.$emit(
          "drawChange",
          this.value.id,
          this.value.left + windowRem * 1 * 0.5,
          top,
          width,
          clientH
        );
        // that.$emit("drawChange", this.value.id, x, y, w, h);
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    //左上
    leftTopDraw(e) {
      var that = this;
      //记录原来的宽
      var domW = this.value.width;
      var domL = this.value.left;
      var domT = this.value.top;
      var domH = this.value.height;
      document.documentElement.style.cursor = "nw-resize";
      var windowRem = (document.documentElement.clientWidth / 1920) * 16;
      var domMousedown = (eve) => {
        //计算鼠标往右边移动多少
        var clientW = domW + e.clientX - eve.clientX;
        if (clientW < 1) return;
        var left = eve.clientX - e.clientX + domL;
        this.value.left = left;
        this.value.width = clientW;
        var top = eve.clientY - e.clientY + domT;
        this.value.top = top;
        var clientH = domH + e.clientY - eve.clientY;
        this.value.height = clientH;
        this.$emit(
          "drawChange",
          this.value.id,
          left + windowRem * 1 * 0.5,
          top,
          clientW,
          clientH
        );
        // that.$emit("drawChange", this.value.id, x, y, w, h);
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    //左下
    leftBottomDraw(e) {
      var that = this;
      //记录原来的宽
      var domW = this.value.width;
      var domL = this.value.left;
      var domH = this.value.height;
      document.documentElement.style.cursor = "ne-resize";
      var windowRem = (document.documentElement.clientWidth / 1920) * 16;
      var domMousedown = (eve) => {
        //计算鼠标往右边移动多少
        var clientW = domW + e.clientX - eve.clientX;
        if (clientW < 1) return;
        var left = eve.clientX - e.clientX + domL;
        this.value.left = left;
        this.value.width = clientW;
        var clientH = eve.clientY - e.clientY + domH;
        this.value.height = clientH;
        this.$emit(
          "drawChange",
          this.value.id,
          left + windowRem * 1 * 0.5,
          this.value.top,
          clientW,
          clientH
        );
        // that.$emit("drawChange", this.value.id, x, y, w, h);
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    //左中
    leftCenterDraw(e) {
      var that = this;
      //记录原来的宽
      var domW = this.value.width;
      var domL = this.value.left;
      //var domH = this.value.height;
      document.documentElement.style.cursor = "e-resize";
      //rem比例
      var windowRem = (document.documentElement.clientWidth / 1920) * 16;
      var domMousedown = (eve) => {
        //计算鼠标往右边移动多少
        var clientW = domW + e.clientX - eve.clientX;
        if (clientW < 1) return;
        var left = eve.clientX - e.clientX + domL;
        this.value.left = eve.clientX - e.clientX + domL;
        this.value.width = clientW;
        this.$emit(
          "drawChange",
          this.value.id,
          left + windowRem * 1 * 0.5,
          this.value.top,
          clientW,
          this.value.height
        );
        // that.$emit("drawChange", this.value.id, x, y, w, h);
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    //右下
    buttonRightDraw(e) {
      var that = this;
      //记录原来的宽
      var domW = this.value.width;
      var domH = this.value.height;
      var domMousedown = (eve) => {
        document.documentElement.style.cursor = "se-resize";
        //计算鼠标往右边移动多少

        var clientW = eve.clientX - e.clientX + domW;
        this.value.width = clientW;
        var clientH = eve.clientY - e.clientY + domH;
        this.value.height = clientH;
        that.$emit("xwChange", this.value.id, clientW, clientH);
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    //中下按钮
    bottomCenterDraw(e) {
      var that = this;
      //记录原来的高
      var domH = this.value.height;
      var domMousedown = (eve) => {
        document.documentElement.style.cursor = "n-resize";
        //计算鼠标往右边移动多少
        var clientH = eve.clientY - e.clientY + domH;
        this.value.height = clientH;
        that.$emit("xwChange", this.value.id, this.value.width, clientH);
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
    draw(e) {
      var that = this;
      var dom = this.$refs.draw;
      this.oldX = e.clientX;
      this.oldY = e.clientY;
      document.documentElement.style.cursor = "move";
      var domMousedown = (eve) => {
        var x = e.clientX + eve.clientX - e.clientX - e.offsetX;
        var y = e.clientY + eve.clientY - e.clientY - e.offsetY;
        that.value.top = y;
        that.value.left = x - 2;
        var w = this.value.width;
        var h = this.value.height;
        that.$emit("drawChange", this.value.id, x, y, w, h);
      };
      document.addEventListener("mousemove", domMousedown);
      var domOnmouseup = (eve) => {
        document.documentElement.style.cursor = "default";
        document.removeEventListener("mousemove", domMousedown);
      };
      document.addEventListener("mouseup", domOnmouseup);
    },
  },
};
</script>

<style lang="less" scoped>
.drawMain {
  position: absolute;
  top: 0;
  left: 0;

  .rightCenter:hover {
    cursor: ew-resize;
  }

  .bottomCenter:hover {
    cursor: n-resize;
  }

  .buttonRight:hover {
    cursor: se-resize;
  }

  .leftCenter:hover {
    cursor: e-resize;
  }
  .leftBottom:hover {
    cursor: sw-resize;
  }
  .rightTop:hover {
    cursor: sw-resize;
  }
  .centerTop:hover {
    cursor: n-resize;
  }
  .leftTop:hover {
    cursor: se-resize;
  }
}
</style>
